<template>
  <div id="app">
    <router-view />
    <div class="menulink">
      <van-tabbar v-model="active" active-color="#d55a31" inactive-color="#000">
        <van-tabbar-item icon="home-o" replace to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" dot replace to="/searchpage">搜索</van-tabbar-item>
        <van-tabbar-item icon="friends-o" info="10">消息</van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" replace to="/profile">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  }
};
</script>
<style lang="less">
// 引入图标库
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
* {
  margin: 0;
  padding: 0;
}
// body {
//   background-color: #f5f5f5;
// }
body {
  // background: url("./images/bg1.jpg") no-repeat center;
  // background-size: 1080px/2 1920px/2;
  background-color: #f7f7f7;
}
a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}
.menulink {
  display: flex;
  justify-content: space-around;
  align-content: flex-end;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #ccc;
  box-sizing: border-box;
}
.topnav + div {
  padding-top: 16.111vw;
}
</style>
